<template>
	<scroll-view class="goods-scroll-box" scroll-x="true">
		<view class="goods-card" @click="ShowToGopop">
			<image class="card-img" :src="imageUrl + firstImage" mode="aspectFill"></image>
			<view class="card-right">
				<text class="title">{{ScienceData.scienc_name}} </text>
				<text class="description">{{ScienceData.scenic_decr}}</text>
				<view class="price-box">
						<view  class="card-btn" @click.stop="selectedScien()">选择</view>
				</view>
			</view>
		</view>
	</scroll-view>
	<toGopopVue ref="isToGopop" :popupData="selectedItem"></toGopopVue>
</template>

<script setup>
	import {ref,watchEffect,computed} from 'vue'
	// import {onLoad} from '@dcloudio/uni-app'
	import {imageUrl} from '@/config/request/request.js'
	import { getAttractionsGoods } from '@/config/API/Map.js';
	import {routerGuard} from '@/config/RouteGuard.js'
	import toGopopVue from '../../customize/WhereTo/components/toGopop.vue';
	const goodsData = ref([])
	const selectedItem = ref({})
	const props = defineProps({
		id: {
			type: Number,
			default: 0,
			required: true
		},
		ScienceData:{
			type: Object,
			default: ()=>{},
			required: true
		}
	});
	watchEffect(()=>{
		console.log('父组件ScienceData==>',props.ScienceData);
	})
	watchEffect(async() => {
		console.log('父组porps.id:', props.id);
		try {
			const resdata = await getAttractionsGoods(props.id)
			goodsData.value = resdata.data
			console.log('goodsData.value',goodsData.value);
		} catch (error) {
			console.log('获取数据失败',error);
		}
	});
	const emits  = defineEmits(['selectedBack'])
	///////////////////////景点弹窗控制
	const isToGopop = ref(null); // 控制弹窗
	// 展示弹窗
	const ShowToGopop = () => {
	  isToGopop.value.showPopup();
	  selectedItem.value = props.ScienceData
	  console.log('地图穿的selectedItem.value',selectedItem.value);
	};
	const selectedScien =() =>{
		emits('selectedBack',props.ScienceData)
	
	}
	const firstImage = computed(() => {
		if(!props.ScienceData.scienc_img) return ''
		return props.ScienceData.scienc_img.split(',')[0]
	})

</script>

<style lang="scss" scoped>
	.goods-scroll-box{
		width: 100%;
		max-height: 300rpx;
		white-space: nowrap;
		.goods-card{
			width: 90%;
			height: 240rpx;
			display: inline-flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 24rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			background-color: #fff;
			margin-left: 30rpx;
			.card-img{
				min-width: 40%;
				max-width: 40%;
				height: 100%;
				border-radius: 10rpx;
			}
			.card-right{
				min-width: 56%;
				max-width: 56%;
				height: 220rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				text{
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: pre-wrap;
				}
				.title{
					-webkit-line-clamp: 2;
					line-height: 52rpx;
					font-weight: 600;
				}
				.description{
					-webkit-line-clamp: 1;
					font-size: 26rpx;
					color: #8a8a8a;
					// margin: 20rpx 0;
				}
				.price-box{
					width: 100%;
					display: flex;
					justify-content: flex-end;
				.card-btn{
					    width: 120rpx;
					     height: 60rpx;
					     line-height: 60rpx;
					    background: #000;
					    color: #fff;
						text-align: center;
						border-radius: 10rpx;
				}
				}
					
				
			
			}
		}
	}
</style>